<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: wcl
 * @Date: 2023-11-23 11:33:36
 * @LastEditors: wcl
 * @LastEditTime: 2023-11-23 11:41:44
-->
<template>
  <div>
    <a-modal v-model:open="modalOpen" :title="title" width="50%" :footer="null">
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-form
          :model="formData"
          ref="formRef"
          :rules="rules"
          labelAlign="left"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-form-item label="特权名称" name="name">
            <a-input v-model:value="formData.name" placeholder="输入等级名称" />
          </a-form-item>
          <a-form-item label="特权图标" name="coverPic" ref="uploadImg">
            <div class="img-item">
              <a-upload
                name="avatar"
                accept=".jpg,.png,.gif,.jpeg,.bmp,.svg,.webp,.apng"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                :action="null"
                :before-upload="beforeUpload"
                @change="handleChange"
              >
                <img
                  style="width: 102px; height: 102px"
                  v-if="formData.coverPic"
                  :src="formData.coverPic"
                  alt="avatar"
                />
                <div v-else>
                  <loading-outlined v-if="loading"></loading-outlined>
                  <plus-outlined v-else></plus-outlined>
                </div>
              </a-upload>
              <div class="img-label">仅支持上传.jpg.png格式</div>
            </div>
          </a-form-item>
          <a-form-item label="展示排序" name="sort">
            <a-input
              v-model:value="formData.sort"
              placeholder="输入排序数字编号"
            />
          </a-form-item>
          <a-form-item label="特权类型" name="type">
            <a-select
              ref="select"
              v-model:value="formData.type"
              placeholder="请选择特权类型"
              @change="handleChangeType"
            >
              <a-select-option :value="1">优惠卷</a-select-option>
              <a-select-option :value="2">积分抵扣</a-select-option>
              <a-select-option :value="3">生日献礼</a-select-option>
              <a-select-option :value="4">延迟退货</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="优惠券"
            name="dataId"
            :rules="[
              typeList.length > 0
                ? { required: true, message: '请选择优惠券' }
                : { required: false },
            ]"
            v-if="formData.type == 1"
          >
            <div class="coupons-container" v-if="typeList.length > 0">
              <a-radio-group
                v-model:value="formData.dataId"
                style="width: 100%"
              >
                <div
                  class="coupons-item"
                  v-for="item in typeList"
                  :key="item.id"
                >
                  <a-radio class="item-checkbox" :value="item.id"> </a-radio>
                  <div class="maxout" v-if="item.type == 2">
                    <p><span>{{ item.amount }}折</span>
                    </p>
                    <p>{{ item.name }}</p>
                  </div>
                  <div class="item-text" v-if="item.type == 2">
                    <p>{{ item.introduce }}</p>
                    <p>有效期至{{ item.endTime }}</p>
                  </div>
                  <div class="maxout" v-if="item.type == 1">
                    <p>
                      <span>￥{{ item.amount }}</span>
                    </p>
                    <p>满{{ item.minAmount }}可用</p>
                  </div>
                  <div class="item-text" v-if="item.type == 1">
                    <p>{{ item.name }}</p>
                    <p>有效期至{{ item.endTime }}</p>
                  </div>
                  <p class="item-name">
                    {{ item.type == 1 ? "满减券" : "折扣券" }}
                  </p>
                </div>
              </a-radio-group>
            </div>
            <p v-else style="margin: 0">该商品暂无优惠券</p>
          </a-form-item>
          <a-form-item
            v-if="formData.type == 2"
            label="积分抵扣"
            name="dataId"
            :rules="[{ required: true, message: '请输入积分抵扣' }]"
          >
            <a-input
              v-model:value="formData.dataId"
              placeholder="输入积分抵扣"
            />
          </a-form-item>
          <a-form-item
            v-if="formData.type == 4"
            label="延迟退货"
            name="dataId"
            :rules="[{ required: true, message: '请输入延迟退货' }]"
          >
            <a-input-number
              v-model:value="formData.dataId"
              placeholder="输入延迟退货"
              type="number"
              min="0"
              style="width: 100%"
              :precision="0"
              suffix="天"
            />
          </a-form-item>
          <a-form-item label="状态" name="state">
            <a-select
              ref="select"
              v-model:value="formData.state"
              placeholder="请选择会员状态"
            >
              <a-select-option :value="1">启用</a-select-option>
              <a-select-option :value="0">禁用</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
        <div class="modal-but-layout">
          <a-space wrap>
            <a-popconfirm
              title="您是否要数据重置?"
              ok-text="是"
              cancel-text="否"
              @confirm="confirm"
            >
              <a-button>重置</a-button>
            </a-popconfirm>
            <a-button type="primary" @click="handleSubmit">提交</a-button>
          </a-space>
        </div>
      </a-space>
    </a-modal>
  </div>
</template>
<script setup>
import { nextTick, ref } from "vue";
import { singleUploadsFile } from "@/api/upload";
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons-vue";
import { saveGrowthRights } from "@/api/group";
import { listCouponConfig } from "@/api/market";
const modalOpen = ref(false);
const formRef = ref(null);
const formData = ref({
  levelId: undefined,
  name: undefined,
  coverPic: undefined,
  sort: undefined,
  type: undefined,
  state: undefined,
});
const rules = {
  name: [{ required: true, message: "输入特权名称" }],
  coverPic: [{ required: true, message: "请上传特权图标" }],
  sort: [{ required: true, message: "请输入序号" }],
  type: [{ required: true, message: "请选择特权类型" }],
  state: [{ required: true, message: "请选择状态" }],
};
const title = ref("");
const open = (titles, record, type) => {
  title.value = titles;
  modalOpen.value = true;
  nextTick(() => {
    if (type === "add") {
      formData.value = {};
      formData.value.levelId = record.id;
    } else {
      formData.value = Object.assign({}, record);
    }
    getListCouponConfigFn();
    formRef.value.resetFields();
  });
};
const loading = ref(false);
const uploadImg = ref(null);
function beforeUpload(file) {
  //判断是否小于20M
  let isLt20M = file.size < 1024 * 1024 * 20;
  if (!isLt20M) {
    //将fileList中本次file文件删掉
    fileList.splice(fileList.indexOf(file), 1);
    message.error("所选文件单个超过20M，已自动过滤，请检查~");
  }
  return false;
}
const handleChange = (file) => {
  loading.value = true;
  let formState = new FormData();
  formState.append("file", file.file);
  formState.append("type", "1");
  singleUploadsFile(formState).then((res) => {
    if (res.code == 200) {
      loading.value = false;
      formData.value.coverPic = res.data;
      uploadImg.value.clearValidate();
    }
  });
};
function handleChangeType(val) {
  formData.value.type = val;
}
const typeList = ref([]);
const getListCouponConfigFn = async () => {
  const res = await listCouponConfig({ page: 1, pageSize: 9999, source: 3 });
  if (res.code === 200) {
    typeList.value = res.data.list.filter(item => item.state === 1);
  }
};
const emits = defineEmits(["refreshList"]);
const handleSubmit = async (res) => {
  formRef.value.validate().then((res) => {
    saveGrowthRights(formData.value).then((result) => {
      if (result.code === 200) {
        modalOpen.value = false;
        emits("refreshList");
      }
    });
  });
};
const confirm = () => {
  formData.value = {
    name: undefined,
    coverPic: undefined,
    sort: undefined,
    type: undefined,
    state: undefined,
  };
};
defineExpose({ modalOpen, open });
</script>
<style lang="scss" scoped>
.coupons-container {
  max-height: 210px;
  overflow-y: auto;
  .coupons-item {
    width: 330px;
    height: 130px;
    background: url("../../../assets/coupon-silver.png");
    position: relative;
    margin-right: 10px;
    display: flex;
    .item-checkbox {
      position: absolute;
      right: 5px;
      top: 20px;
    }
    .discount {
      width: 115px;
      flex-shrink: 0;
      line-height: 130px;
      text-align: center;
      color: rgb(129, 75, 36);
      font-size: 20px;
      span {
        font-size: 24px;
      }
    }
    .maxout {
      width: 115px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: rgb(129, 75, 36);
      p:nth-of-type(1) {
        span {
          font-size: 22px;
        }
      }
      p:nth-of-type(2) {
        font-size: 14px;
      }
    }
    .item-text {
      width: 165px;
      flex-shrink: 0;
      // border:1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: center;
      p:nth-of-type(1) {
        font-size: 18px;
      }
      p:nth-of-type(2) {
        color: rgb(138, 116, 98);
      }
    }
    .item-name {
      width: 50px;
      flex-shrink: 0;
      writing-mode: vertical-lr;
      text-align: center;
      color: rgb(164, 146, 108);
      padding-top: 30px;
      font-size: 17px;
    }
  }
}
</style>
